@import "variables.less";
.tile {
  display: block;
  cursor: pointer;
  -webkit-perspective: 0;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.2s;
  float: left;
  min-width: 75px;
  min-height: 75px;
  text-align: center;
  opacity: 0.75;
  background-color: @tile-bg;
  z-index: 1;
  border: @tile-border @tile-border-bg solid;
  color: @tile-text-color;
  position: relative;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: @tile-text-color;
    -webkit-user-select: none;
  }
  h2 {
    margin-top: -20px;
    margin-left: 0px;
  }
  h3,
  h4 {
    margin-top: -15px;
  }

  h1.tile-text,
  h2.tile-text,
  h3.tile-text,
  h4.tile-text {
    margin-top: 20px;
  }

  h1 {
    font-size: @tile-font-size-h1;
  }
  h2 {
    font-size: @tile-font-size-h2;
  }
  h3 {
    font-size: @tile-font-size-h3;
  }
  h4 {
    font-size: @tile-font-size-h4;
  }

  a:hover {
    text-decoration: none;
  }
  .text-left {
    position: absolute;
    bottom: 5px;
    left: 5px;
    color: @gray-light;
  }
  .text-right {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: @gray-light;
  }
}

.tile img {
  border: 0;
}
.tile:hover {
  opacity: 1;
}

.tile .tile-label {
  position: absolute;
  bottom: 10px;
  left: 20px;
  font-size: 14px;
  color: @tile-text-color;
}

.tile .tile-content .tile-icon-large {
  margin-left: 0px;
  vertical-align: middle !important;
  text-align: center;
}

.tile .tile-content {
  padding-top: 20px;
  line-height: normal;
  position: relative;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tile.tile-sky-blue {
  background-color: @sky-blue;
}
.tile.tile-blue {
  background-color: @blue;
}
.tile.tile-green {
  background-color: @green;
}
.tile.tile-red {
  background-color: @red;
}
.tile.tile-yellow {
  background-color: @yellow;
}
.tile.tile-orange {
  background-color: @orange;
}
.tile.tile-pink {
  background-color: @pink;
}
.tile.tile-purple {
  background-color: @purple;
}
.tile.tile-lime {
  background-color: @lime;
}
.tile.tile-magenta {
  background-color: @magenta;
}
.tile.tile-teal {
  background-color: @teal;
}
.tile.tile-turquoise {
  background-color: @turquoise;
}
.tile.tile-green-sea {
  background-color: @green-sea;
}
.tile.tile-emerald {
  background-color: @emerald;
}
.tile.tile-nephritis {
  background-color: @nephritis;
}
.tile.tile-peter-river {
  background-color: @peter-river;
}
.tile.tile-belize-hole {
  background-color: @belize-hole;
}
.tile.tile-amethyst {
  background-color: @amethyst;
}
.tile.tile-wisteria {
  background-color: @wisteria;
}
.tile.tile-wet-asphalt {
  background-color: @wet-asphalt;
}
.tile.tile-midnight-blue {
  background-color: @midnight-blue;
}
.tile.tile-sun-flower {
  background-color: @sun-flower;
}
.tile.tile-carrot {
  background-color: @carrot;
}
.tile.tile-pumpkin {
  background-color: @pumpkin;
}
.tile.tile-alizarin {
  background-color: @alizarin;
}
.tile.tile-pomegranate {
  background-color: @pomegranate;
}
.tile.tile-clouds {
  background-color: @clouds;
  color: @tile-light-text-color;
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: @tile-light-text-color;
  }
}

.tile.tile-clouds .tile-label {
  color: @tile-light-text-color;
}

.tile.tile-silver {
  background-color: @silver;
}
.tile.tile-concrete {
  background-color: @concrete;
}
.tile.tile-asbestos {
  background-color: @asbestos;
}

.tile.tile-info {
  background-color: @tile-info-bg;
}
.tile.tile-danger {
  background-color: @tile-danger-bg;
}
.tile.tile-warning {
  background-color: @tile-warning-bg;
}
.tile.tile-success {
  background-color: @tile-success-bg;
}

a.fa-links {
  color: #ffffff;
}
a.fa-links:hover,
a.fa-links:focus {
  color: #ffffff;
}

.tile.tile-small {
  height: 70px;
  width: 70px;
}
.tile.tile-medium {
  height: 150px;
  width: 150px;
}
.tile.tile-wide,
.tile.tile-double {
  height: 150px;
  width: 310px;
}
.tile.tile-large {
  height: 310px;
  width: 310px;
}
.tile.tile-full {
  width: 100%;
  height: 100%;
}
.tile.tile-h-full {
  height: 100%;
}
.tile.tile-w-full {
  width: 100%;
}
